<template>
	<view>
		<view class="p-2">

			<!-- 不可修改 -->
			<view style="width: 80%; margin: 0 auto;">
				<my-register-input :canBeModified='false' title="姓名" :value="oddAgeAllowanceData.sbName"></my-register-input>
			</view>
			<view style="width: 80%; margin: 0 auto;">
				<my-register-input :canBeModified='false' title="身份证号" :value="oddAgeAllowanceData.sbIdcard"></my-register-input>
			</view>
			<view style="width: 80%; margin: 0 auto;">
				<my-register-input :canBeModified='false' title="民族" :value="oddAgeAllowanceData.sbNation"></my-register-input>
			</view>
			<view style="width: 80%; margin: 0 auto;">
				<my-register-input :canBeModified='false' title="出生日期" :value="oddAgeAllowanceData.sbBirth"></my-register-input>
			</view>
			<view style="width: 80%; margin: 0 auto;">
				<my-register-input :canBeModified='false' title="性别" :value="oddAgeAllowanceData.sbSex"></my-register-input>
			</view>

			<!-- 可修改 -->
			<view style="width: 80%; margin: 0 auto;">
				<my-register-input title="现居住地" :value="oddAgeAllowanceData.sbAddress" @changeValue="changeSensus"></my-register-input>
			</view>
			<view style="width: 80%; margin: 0 auto;">
				<my-register-input title="电话号码" :value="oddAgeAllowanceData.sbPhone" type="number" @changeValue="changePhone"></my-register-input>
			</view>



			<view style="flex-wrap: wrap;" class="line flex">
				<view style="color: #808080;" class="flex3">有无银行卡</view>
				<radio-group @change="radioSelected" class="flex7 flex">
					<label class="flex flex1" v-for="(item,index) in haveBank" :key="index">
						<view>
							<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
						</view>
						<view>
							<label class="label-2-text" :for="item.name">
								<text>{{item.value}}</text>
							</label>
						</view>
					</label>
				</radio-group>
				<cross-line style="width: 100%;"></cross-line>
			</view>

			<view v-if="oddAgeAllowanceData.bankNumFlag == 1" style="width: 80%; margin: 40rpx auto 0;">
				<view class="flex mb-3">
					<view style="color: #808080;">开户行类型</view>
					<picker class="flex-1 ml-2" @change="bankPickerChange" :value="bankPinkerIndex" :range="bankPinker">
						<view style=" width: 100%;">{{bankPinker[bankPinkerIndex]}}</view>
					</picker>
				</view>
				<view style="width: 100%;  height: 1px; background: #9EABB2; margin-top: 20rpx;"></view>
			</view>

			<view v-if="oddAgeAllowanceData.bankNumFlag == 1" style="width: 80%; margin: 0 auto;">
				<my-register-input title="银行号/存折号" type="number" @changeValue="changeBankCard"></my-register-input>
			</view>
			<view v-else style="width: 80%; margin: 20rpx auto;">
				<my-register-input title="与开户人关系" @changeValue="changeRelation"></my-register-input>
			</view>


			<!-- 上传图片 -->
			<view class="upload-container" @tap="chooseOlderly">
				<view class="flex align-center justify-center" style="width: 100%;">
					<image v-if="uploadPicSrc.olderlySrc" :src="uploadPicSrc.olderlySrc" class="upload-container-image"></image>
					<view v-else style="color: #95A3AB; line-height: 350rpx;">老人照片</view>
				</view>
			</view>
			<view class="upload-container" @tap="chooseNationBook">
				<view class="flex align-center justify-center" style="width: 100%;">
					<image v-if="uploadPicSrc.NationBookSrc" :src="uploadPicSrc.NationBookSrc" class="upload-container-image"></image>
					<view v-else style="color: #95A3AB; line-height: 350rpx;">户口本照片</view>
				</view>
			</view>
			<view class="upload-container" @tap="chooseIdentityPositive">
				<view class="flex align-center justify-center" style="width: 100%;">
					<image v-if="uploadPicSrc.identitySrcPositive" :src="uploadPicSrc.identitySrcPositive" class="upload-container-image"></image>
					<view v-else style="color: #95A3AB; line-height: 350rpx;">身份证正面</view>
				</view>
			</view>
			<view class="upload-container" @tap="chooseIdentitySide">
				<view class="flex align-center justify-center" style="width: 100%;">
					<image v-if="uploadPicSrc.identitySrcSide" :src="uploadPicSrc.identitySrcSide" class="upload-container-image"></image>
					<view v-else style="color: #95A3AB; line-height: 350rpx;">身份证反面</view>
				</view>
			</view>

			<view class="mt-4" style="padding: 0 100rpx;">
				<button type="primary" @tap="formSubmit">提交申请</button>
			</view>
		</view>

	</view>
</template>

<script>
	import crossLine from '@/components/ui/tg-cross-line.vue'
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue';
	import myRegisterInput from "@/components/ui/myRegisterInput.vue";
	import {
		Decrypt,
		Encrypt
	} from '@/common/util/crypto.js';

	export default {
		components: {
			uniNavBar,
			myRegisterInput,
			crossLine
		},
		async onShow() {
			//查询老人高龄是否已经申请过，申请过则提示老人已申请，不可重复申请。
		},
		async onLoad() {
			var res = await this.$api.queryBankType();
			var data = res.data.result;
			console.log(data)
			for (let i = 0; i < data.length; i++) {
				this.bankPinker.push(data[i].bankName);
			}
			var res = await this.$api.querySeniorInfo();
			res = res.data.result;
			this.oddAgeAllowanceData = {
				"bankNumFlag": 1, //1表示有银行卡，2表示没有银行卡
				"processKey": "glbt", //默认
				"processName": "补贴申请", //补贴类型
				"relation": "", //与户主关系
				"sbAddress": res.userAddress, //现居地址
				"sbBankAccount": "", //银行卡号
				"sbBankAccountType": data[0].bankName, //银行类型
				"sbBirth": this.$utiltg.dateDiff(res.birth),
				"sbIdcard": res.cardNo, //身份证号
				"sbName": res.nickName, //名字
				"sbNation": res.nation, //民族
				"sbPhone": res.phone, //手机号
				"sbSensus": res.userPlace, //户籍地址
				"sbSex": res.gender, //性别

				fileUrl: '',
				personFileUrl: '',
				nationFileUrl: '',
				reverseFileUrl: ''
			}
		},
		data() {
			return {
				haveBank: [{
						name: 2,
						value: '没有',

					},
					{
						name: 1,
						value: '有',
						checked: true
					}
				],
				oddAgeAllowanceData: {},
				uploadPicSrc: {
					olderlySrc: '',
					NationBookSrc: '',
					identitySrcPositive: '',
					identitySrcSide: ''
				},
				bankPinker: [],
				bankPinkerIndex: 0
			}
		},
		methods: {
			async formSubmit() {

				if (this.checkParam(this.oddAgeAllowanceData)) {
					console.log(this.oddAgeAllowanceData)
					var res = await this.$api.appUserApply(this.oddAgeAllowanceData)
					console.log(res)
					if (res.data.code == 200) {
						uni.showModal({
							title: `提示`,
							content: `提交成功！`,
							success() {
								uni.navigateBack({

								})
							}
						})
					}else if(res.data.code == 208){
						uni.showModal({
							title: `提示`,
							content: `对不起，您申请的流程正在审核中，无法再次申请！`,
							success() {
								uni.navigateBack({
									
								})
							}
						})
					} else {
						uni.showModal({
							title: `提示`,
							content: `网络繁忙，请稍后重试`,
							success() {
								uni.navigateBack({

								})
							}
						})
					}
				}
			},
			// 检测参数
			checkParam(obj) {

				if (obj.bankNumFlag == 1) {
					if (obj.sbBankAccount == '') {
						uni.showToast({
							title: '银行卡号不能为空',
							icon: "none",
							duration: 2000
						});
						return false;
					}
				} else {
					if (obj.relation == '') {
						uni.showToast({
							title: '与户主关系不能为空',
							icon: "none",
							duration: 2000
						});
						return false;
					}
				}

				// 检测手机号码时候有误
				if (!(/^1[3456789]\d{9}$/.test(obj.sbPhone))) {
					uni.showToast({
						title: '手机号码有误',
						icon: "none",
						duration: 2000
					});
					return false;
				}

				if (obj.fileUrl == '' || obj.personFileUrl == '' || obj.nationFileUrl == '' || obj.reverseFileUrl == '') {
					uni.showToast({
						title: '请上传相关照片',
						icon: "none",
						duration: 2000
					});
					return false;
				}

				return true;
			},

			/**
			 * @param {Object} e
			 * 改手机号
			 */
			changePhone(e) {
				this.oddAgeAllowanceData.sbPhone = e.newDate;
			},
			/**
			 * @param {Object} e
			 * 现居地址
			 */
			changeSensus(e) {
				this.oddAgeAllowanceData.sbAddress = e.newDate;
			},
			/**
			 * @param {Object} e
			 * 开户行类型
			 */
			bankPickerChange(e) {
				this.bankPinkerIndex = e.target.value
				this.oddAgeAllowanceData.sbBankAccountType = this.bankPinker[e.target.value]
			},
			/**
			 * 银行卡号
			 * @param {Object} e
			 */
			changeBankCard(e) {
				this.oddAgeAllowanceData.sbBankAccount = e.newDate;
			},
			/**
			 * 与户主关系
			 * @param {Object} e
			 */
			changeRelation(e) {
				this.oddAgeAllowanceData.relation = e.newDate;
			},
			radioSelected(e) {
				console.log(e)
				this.oddAgeAllowanceData.bankNumFlag = e.detail.value;
			},
			// 返回上一页
			backLastPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			chooseOlderly() {
				this.uploadPic('olderlySrc', 'personFileUrl');
			},
			chooseNationBook() {
				this.uploadPic('NationBookSrc', 'nationFileUrl');
			},
			chooseIdentityPositive() {
				this.uploadPic('identitySrcPositive', 'fileUrl');
			},
			chooseIdentitySide() {
				this.uploadPic('identitySrcSide', 'reverseFileUrl');
			},
			uploadPic(showSrc, uploadSrc) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					success: async (res) => {
						this.uploadPicSrc[showSrc] = res.tempFilePaths[0];
						const upload = await this.$api.UploadApplicationPic('file', res.tempFilePaths[0]);
						this.oddAgeAllowanceData[uploadSrc] = JSON.parse(upload.data).result;
					}
				});
			},
			async getBankTypeList() {

			}
		},

	}
</script>

<style>
	.line {
		width: 80%;
		margin: 0 auto;
		line-height: 70rpx;
		height: 70rpx;
	}

	.upload-container {
		display: flex;
		width: 80%;
		height: 350rpx;
		margin: 40rpx auto;
		border-radius: 25rpx;
		border: solid 1px #CCCCCC;
	}

	.upload-container-image {
		width: 100%;
		height: 100%;
		border-radius: 25rpx;
	}
</style>
